.theme-dark,
.theme-light {
    &.wotc-beyond,
    & .wotc-beyond {
        --header-weight: 500;
        --font: 'its-Draconis', 'Draconis', Inter;
        
        --font-monospace: 'its-Fira Code', 'Fira Code', Inter;
        --font-default: 'its-Bookerly', 'Bookerly', Inter;
        --font-text: var(--font-default);

        --vault-name-font-size: 25px;
    
        --hr-icon-symbol: "\E803";
        --hr-icon-font: var(--its);
        --hr-icon-symbol: ;
        --hr-image-height: 5px;
        --hr-image-width: 100%;
        --hr-thickness: 0;

        --embed-h: #c93c3c;
        --h2-color: sandybrown;
        --h3-color: #a11111;

        --h1-border-line-color: var(--embed-h);
        --h2-border-line-color: var(--h2-color);
        --h3-border-line-color: var(--h3-color);

        --h1-border-right-color: linear-gradient(to right, var(--h1-border-line-color), transparent);
        --h2-border-right-color: linear-gradient(to right, var(--h2-border-line-color), transparent);
        --h3-border-right-color: linear-gradient(to right, var(--h3-border-line-color), transparent);
        --h4-border-right-color: linear-gradient(to right, var(--header-border-line-color), transparent);
        --h5-border-right-color: linear-gradient(to right, var(--header-border-line-color), transparent);
        --h6-border-right-color: linear-gradient(to right, var(--header-border-line-color), transparent);

        --h1-border-left-color: linear-gradient(to left, var(--h1-border-line-color), transparent);
        --h2-border-left-color: linear-gradient(to left, var(--h2-border-line-color), transparent);
        --h3-border-left-color: linear-gradient(to left, var(--h3-border-line-color), transparent);
        --h4-border-left-color: linear-gradient(to left, var(--header-border-line-color), transparent);
        --h5-border-left-color: linear-gradient(to left, var(--header-border-line-color), transparent);
        --h6-border-left-color: linear-gradient(to left, var(--header-border-line-color), transparent);

        --icon-color: var(--text);
        --drop-shadow: var(--td);

        // Paper Burn
        --paper-edges: 0 0 60px var(--outline) inset;
        --paper-edges-m: 0 0 100px var(--outline) inset;
        --tab-container-background: transparent;
        --tab-titlebar-color: transparent;
        // --tab-background-active: var(--tab-outline-color);
        --pane-background: transparent;
        // --modal-background: transparent;
        --file-header-background: transparent;

        //kanban
        --kanban-card-title-background: var(--td);
        --kanban-card-metadata-background: var(--note);
    }
}


.theme-dark {
    &.wotc-beyond,
    & .wotc-beyond {
        
        --outline: #0000008c;

        --headers: #c14343;
        --code-text: #fa4545;
        --tag-text: #d04e4e;
        // --accent2-lite: #e06c75;
        --dark-accent: #652121;
        --accent: #863737;
        --i-at: #bf5e5e;

        --folder: var(--accent);

        --hr-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 7' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Crect id='Artboard1' x='0' y='0' width='100' height='7' style='fill:none;'/%3E%3Cpath d='M50,2.5L100,3.5L50,4L0,3.5L50,2.5Z' style='fill:rgb(146, 47, 47);'/%3E%3C/svg%3E") no-repeat center center;
        --hr: #772d2d;

        --hvr-active: rgba(212, 47, 47, 0.4);
        --highlight: #7a141466;
}}

.theme-light {
    &.wotc-beyond,
    & .wotc-beyond {

        --hvr-active: rgba(182, 28, 28, 0.50);
        --highlight: #c20a0a35;

        --outer-bar: #fbe2c5;
        --dark-sidebar: #f6e3cd;
        --side-bar: #fff6e4;
        
        --note: #fff9f0; //#fffcf0
        --note-rgb: 255, 252, 240;

        --accent-color: 199, 89, 89;
        --accent: #c75959;
        --lite-accent: #a35158;
        --dark-accent: #cd645e; //#ffefda
        --deep-dark-accent: #2e1010;
        --accent2: #000000;
        --accent2-lite: #df6262;

        --headers: #c14343;
        --text: #412f2f;
        --code-text: #681010;
        --inactive: #e2b7a3;

        --file-icon-color: #ebbd92;
        --folder-open: var(--text);
        
        --bg: var(--dark-sidebar);
        --code-bg: #f3e6d2;
        --aside-bg: #faf2e9;
        --embed-bg: var(--aside-bg);
        
        --td: #fae0be60;
        
        --table: var(--outline);
        --hr: var(--table);
        --lines: var(--inactive);
        --outline: #fbb4577e;

        --hr-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 7' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Crect id='Artboard1' x='0' y='0' width='100' height='7' style='fill:none;'/%3E%3Cpath d='M50,2.5L100,3.5L50,4L0,3.5L50,2.5Z' style='fill:rgb(200, 57, 57);'/%3E%3C/svg%3E") no-repeat center center;
        

}}



//Paper Edge
body.wotc-beyond {
    & .workspace-leaf-content,
    & .workspace-tabs,
    & .workspace-sidedock-vault-profile,
    & .vertical-tab-content,
    & .modal.modal,
    & .community-modal-sidebar,
    & .canvas-wrapper
    { box-shadow: var(--paper-edges); }

    & .workspace .mod-root .workspace-tab-header {
        box-shadow: 0 0 0 var(--tab-outline-width) var(--tab-outline-color), var(--paper-edges);
    }

    //Publish Site Paper Edges
    & .site-body-left-column, 
    & .site-body-right-column,
    & .publish-renderer,
    & .graph-view-container
    { box-shadow: var(--paper-edges-m); }
}

//Note CSSClass 
body:not(.wotc-beyond) .wotc-beyond:is(
    .markdown-source-view,
    .markdown-preview-view
){ box-shadow: var(--paper-edges); }


//Hr 
.wotc-beyond,
.pathfinder
{
    & .cm-line.hr { bottom: -10px; }
    &.markdown-rendered hr::after,
    & .markdown-rendered hr::after,
    & .cm-line:not(.cm-active) hr
    {
        content: "";
        display: block;
        position: relative;
        background: var(--hr-image);
        background-size: var(--hr-image-width);
        height: var(--hr-image-height);
        background-repeat: no-repeat;
        background-position: center;
    }
}
.wotc-beyond .internal-embed.markdown-embed {
    border-style: solid;
    border-width: 11px;
    border-image: url("") 11;
    border-image-outset: 9px 0px;
    box-shadow: 0px 0px 10px var(--outline, var(--background-modifier-box-shadow));
}
